<template>
  <div style="height:calc( 100% - 23px );width:100%;" class="row1 acen">
    <div style="width:10%" @click="gotopre()">
      <el-tooltip effect="dark" content="上一个" placement="top-start">
        <i style="color:#fff;font-size:30px;cursor:pointer"  class="el-icon-arrow-left"></i>
      </el-tooltip>
    </div>
    <!-- <div id="detail" class="thecatchphoto" style="margin-top:2px;"></div> -->
   <videoPlayer
      ref="videoPlayer"
      style="height: 350px"
      class="vjs-custom-skin videoPlayer thecatchphoto"
      :options="playerOptions"
    ></videoPlayer>
    <div style="width:10%" @click="gotonext()">
      <el-tooltip effect="dark" content="下一个" placement="top-start">
        <i style="color:#fff;font-size:30px;cursor:pointer" class="el-icon-arrow-right"></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
export default {
   components: {
    videoPlayer
  },
  data() {
    return {
     
      camName: "海康-4",
      src: "",
      playerOptions:{},
    options: {
        sources: [
          {
            // src:
            //   "rtmp://222.211.78.77:1935/video?type=Play&sourceid=0000000000200000000000000610006:0000000000140000000000000580001:222.211.78.73:610000\\",
            // type: "rtmp/flv"
          type: "",
          src: 'http://vjs.zencdn.net/v/oceans.mp4'    
          }
        ],
        muted: true,
        controls: true,
        autoplay: true,
        techOrder: ["html5", "flash"],
        flash: {
          swf: "./static/video-js.swf" //如果是本地视频  需要相应的videoJS.swf文件
        },
        controlBar: {
          captionsButton: true,
          remainingTimeDisplay: false,
          progressControl: false,
          fullscreenToggle: true
        }
      },
      videoList: [
        "大华-1",
        "大华-2",
        
        "海康-1",
        "海康-2",
        "海康-3",
        "海康-4",
        "海康-5",
        "海康-6",
        "海康-7",
        "海康-8",
        "海康-9",
        "海康-10",
        "海康-11",
        "海康-12",
        "海康-13",
        "海康-14",
        "海康-15",
        "海康-16",
        "海康-17",
        "海康-18",
        "海康-19",
        "海康-20",
        "海康-21",
        "海康-22",
        "海康-23",
        "海康-24",
        "海康-25",
        "海康-26",
        "海康-27",
        "海康-28",
        "海康-30",
        "海康-32"
      ]
    };
  },
  created() {
    // this.gotopre();
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  mounted() {
    var src = "rtmp://222.211.78.77:1935/video?type=Play&sourceid=0000000000200000000000000610007:0000000000140000000000000580001:222.211.78.73:610000\\"; // 跳转页面接收参数
    this.playerOptions = {
      height:"450",
      sources: [
        {
          type: "rtmp/flv", // 直播视频流 直播只有暂停和播放事件
          src: src
        },
        // {
        //   type: "video/mp4",  // MP4
        //   src: "https://images.nnyun.net/lvEh8zLaKkJla-zndPHaHB1KMBUC"
        // }
      ],
      techOrder: ["flash"],
      autoplay: false,
      controls: true
    };
  },
  beforeDestroy: function() {
    const videoDom = this.$refs.myPlayer; //不能用document 获取节点
    if (videoDom) {
      this.$video(videoDom).dispose(); //销毁video实例，避免出现节点不存在 但是flash一直在执行
      this.player.dispose(); //销毁video实例
    }
  },
  methods:{
    gotopre(){
      let camName = this.camName;
      let arr = this.videoList;
      for (let i in arr) {
        if (camName == arr[i] && i > 0) {
          this.camName = arr[i - 1];
          this.selectVideo(arr[i - 1]);
          break;
        }
      }
    },
    gotonext() {
      let camName = this.camName;
      let arr = this.videoList;
      // for (let i = 0; i < arr.length - 1; i++) {
      //   if (camName == arr[i] && i < arr.length - 2) {
      //     this.camName = arr[i + 1];
      //     this.selectVideo(arr[i + 1]);
      //     break;
      //   }
      // }
       this.selectVideo(camName)
    },
    selectVideo(camName) {
      let _this = this;
      _this.axios
        .get("https://wx.honghengxinxi.com:3033/playUrl/video", {
          params:{
             camName: camName
          }
          
        })
        .then(res => {
          window.console.log(res)
         _this.playerOptions['sources'][0]['src'] = res.data;
          // _this.player = _this.$video("my-player", _this.options, function() {
          //   _this.player.off("timeupdate"); //移除timeupdate事件
          //   _this.player.reset(); //重置 video
          //   _this.player.src([
          //     {
          //       type: "rtmp/flv",
          //       src: res
          //     }
          //   ]);
          //   _this.player.load(_this.src);
          //   _this.player.play();
          // });
        });
    },
    playVideo() {
      this.$http
        .get("https://wx.honghengxinxi.com:3033/playUrl/video", {
          camName: "海康-4"
        })
        .then(res => {
          this.player = this.$video("my-player", this.options, function() {
            this.load();

            this.src([
              {
                type: "rtmp/flv",
                src: res
              }
            ]);
            this.play();
            this.on("loadstart", function() {});
            this.on("loadedmetadata", function() {});
            this.on("progress", function() {});
            this.on("timeupdate", function() {});
            this.off("timeupdate", function() {});
          });
        });
    }
  }
};
</script>
<style scoped>
 
</style>
